@import "@/style/var.less";

.answer-notes {
  display: flex;
  flex-direction: column;
  height: 100%;

  .answer-wrap {
    overflow-y: auto;
    background-color: #ecf5f4;
    height: calc(100vh - 70px);
    background-image: url("~assets/reverse/answer-topbg.png");
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 200px;
    .answer-title {
      margin-top: 54px;
      img {
        width: 42px; /* no */
        vertical-align: top;
      }
      span {
        .no-rem-fontsize(30px);
        color: #333;
        font-weight: 700;
        margin-left: 9px;
      }
    }
  }
  .chose-course-top {
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;
    height: 80px;
    padding: 0 40px;
    background-color: #fff;
    .header-left {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .back-arrow {
        width: 30px;
        height: 27px;
        background-image: url("~assets/home/btn_back.png");
        background-size: 100%;
        cursor: pointer;
      }
    }

    .course-title {
      width: 100%;
      font-size: 20px;
      flex: 1;
      font-weight: 700;
    }
    .blank {
      flex: 1;
      display: flex;
    }
  }

  .chapter-title {
    .no-rem-fontsize(24px);
    font-weight: 700;
    color: #fff;
    margin: 30px 0;
  }

  .answer-result {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 600px;
    height: 100px;
    background-color: #fff;
    margin: 30px auto;
    border-radius: 10px; /* no */
    box-shadow: 0px 0px 20px rgba(59, 201, 164, 0.3);

    .result-item {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin: 0 36px;
      .no-rem-fontsize(14px);

      & > span:nth-child(2) {
        font-family: Klavika;
        color: @primary-color;
        .no-rem-fontsize(24px);
      }
    }
  }
  .yxp-info {
    display: flex;
    justify-content: center;
    .yxp-credit,
    .yxp-diamond {
      display: flex;
      align-items: center;
      margin: 0 16px;
      img {
        width: 30px; /* no */
      }
      span {
        .no-rem-fontsize(20px);
        color: #fbad51;
        margin: 0 5px;
      }
    }
  }
  .list-wrap {
    position: relative;
    flex: 1;
    overflow-y: auto;
    color: #333;
    text-align: left;
    .no-rem-fontsize(20px);
    .content-wrap {
      overflow: auto;
      height: calc(100vh - 80px);
      display: flex;
      justify-content: center;
      padding: 30px 0;
    }
  }
  .article-content {
    overflow: auto;
    padding: 50px;
    background-color: #fff;
    border-radius: 10px; /* no */

    .article-paragraph {
      text-indent: 20px;
      font-size: 0;
      line-height: 40px;
    }
    .blank {
      position: relative;
      display: inline-block;
      text-indent: 0;
      text-align: center;
      padding: 0 4px;
      font-size: 24px;
    }
    .normal-blank {
      font-size: 24px;
    }
    .blank-val {
      position: relative;
      &.word-deleted {
        position: relative;
        font-weight: 700;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          height: 4px;
          width: 100%;
          background-color: #ff9d00;
        }
        &.word-right {
          &::after {
            background-color: @primary-color;
          }
        }
        &.word-error {
          &::after {
            background-color: #fd3462;
          }
        }
        .word-delete-word {
          position: absolute;
          font-size: 16px;
          bottom: -17px;
          left: 0;
          right: 0;
          text-align: center;
          line-height: normal;
          color: #ff9d00;
          &.word-right {
            color: @primary-color;
          }
          &.word-error {
            color: #fd3462;
          }
        }
      }
      &.word-changed {
        font-weight: 700;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 32px;
          height: 4px;
          width: 100%;
          background-color: #ff9d00;
        }
        &.word-right {
          &::after {
            background-color: @primary-color;
          }
        }
        &.word-error {
          &::after {
            background-color: #fd3462;
          }
        }

        .word-changed-word {
          position: absolute;
          white-space:nowrap;
          font-size: 16px;
          bottom: -26px;
          left: 0;
          left: 50%;
          transform: translateX(-50%);
          text-align: center;
          line-height: normal;
          color: #ff9d00;
          max-width: 16em;
          text-overflow: ellipsis;
          overflow: hidden;
          &.word-right {
            color: @primary-color;
          }
          &.word-error {
            color: #fd3462;
          }
        }
      }
      &.word-add {
        font-weight: 700;
        position: relative;
        .word-add-word {
          white-space:nowrap;
          position: absolute;
          width: 100%;
          left: 0;
          transform: translateX(-50%);
          top: 38px;
          text-align: center;
          color: #ff9d00;
          font-size: 16px;
          line-height: normal;
          &::before {
            content: "";
            position: absolute;
            top: -3px;
            left: 50%;
            width: 16px;
            height: 16px;
            border: 4px solid #ff9d00;
            border-color: #ff9d00 transparent transparent #ff9d00;
            transform: rotate(45deg) translate(-10px, 5px);
          }
          &.word-right {
            color: @primary-color;
            &::before {
              border-color: @primary-color transparent transparent
                @primary-color;
            }
          }
          &.word-error {
            color: #fd3462;
            &::before {
              border-color: #fd3462 transparent transparent #fd3462;
            }
          }
        }
      }
      .word-hidden {
        display: inline-block;
        max-width: 16em;
        text-overflow: ellipsis;
        overflow-x: hidden;
      }
    }
  }
  .article-blank {
    margin-left: 20px;
    background-color: #fff;
    border-radius: 10px; /* no */
    padding: 40px 60px;
    overflow: auto;

    .topic-controll {
      font-weight: 700;
      .anticon {
        color: @primary-color;
      }
    }

    .true-answer {
      font-weight: 700;
      .no-rem-fontsize(24px);
      color: #000;
      margin-top: 40px; /* no */
    }
    .answer-desc {
      .no-rem-fontsize(20px);
      color: #333;
      margin: 20px 0; /* no */
    }
    .answer-statics {
      .no-rem-fontsize(20px);
      color: #b1b1b1;
    }
    .answer-mark-btn {
      margin-top: 30px; /* no */
      color: @primary-color;
      .no-rem-fontsize(20px);
      & > img {
        vertical-align: middle;
        width: 20px; /* no */
        margin-right: 8px; /* no */
      }
      & > span {
        vertical-align: middle;
      }
    }
    .anaswer-mark {
      .no-rem-fontsize(16px);
      word-wrap: break-word;
      margin: 20px auto; /* no */
      color: #a8a8a8;
      border: 1px solid rgba(222, 222, 222, 1); /* no */
      padding: 25px;
      border-radius: 6px; /* no */
    }
  }
}
